{% load static wagtailuserbar navigation_tags %}

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>
        {% block title %}
            {% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}
        {% endblock %}
        {% block title_suffix %}
            {% with self.get_site.site_name as site_name %}
                {% if site_name %}- {{ site_name }}{% endif %}
            {% endwith %}
        {% endblock %}
    </title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
          integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
          integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous"/>
    {# Global stylesheets #}
    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">

    {% block extra_css %}
        {# Override this in templates to add extra stylesheets #}
    {% endblock %}
</head>

<body class="{% block body_class %}{% endblock %}">
{% wagtailuserbar %}
{% block header %}
    {# Header contains the main_navigation block #}
    <div class="header clearfix" role="banner">
        <div class="container">
            <nav class="navbar navbar-toggleable-md ">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                        data-target="#main-navigation" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a class="navbar-brand" href="/">百里追伊</a>


                {% block main_navigation %}
                    <div class="collapse navbar-collapse" id="main-navigation" role="navigation"
                         aria-label="Primary site navigation">

                        <ul class="navbar-nav mr-auto">
                            {# main_menu is defined in base/templatetags/navigation_tags.py #}
                            {% get_site_root as site_root %}
                            {% top_menu parent=site_root calling_page=self %}
                        </ul>
                    </div>
                {% endblock %}
                <form action="/search" method="get" class="search form-inline my-2 my-lg-0" _lpchecked="1"
                      role="search">
                    <input class="form-control mr-sm-2" name="q" type="text" placeholder="Search the site" id=""
                           aria-label="Search the site"
                           autocomplete="off">
                    <a href="#" class="search-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451">
                            <path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"></path>
                        </svg>
                    </a>
                </form>
            </nav>
        </div>
    </div>

{% endblock header %}

{% block head-extra %}
{% endblock head-extra %}

{% block messages %}
    {% include "includes/messages.html" %}
{% endblock messages %}


{% block breadcrumbs %}
    {# breadcrumbs is defined in base/templatetags/navigation_tags.py #}
    {% breadcrumbs %}
{% endblock breadcrumbs %}

<content role="main">
    {% block content %}
    {% endblock content %}
</content>

<hr>

<!-- Footer -->
<footer>
    {% include "includes/footer.html" %}
</footer>

<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
        integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
        crossorigin="anonymous"></script>
{# Global javascript #}
<script type="text/javascript" src="{% static 'js/zwidny.js' %}"></script>

{% block extra_js %}
    {# Override this in templates to add extra javascript #}
{% endblock %}
</body>
</html>
